<template>
  <div class="layout">
    <div :style="bigScreenStyle">
      <widget
        v-for="(widget, index) in widgets"
        :key="index"
        v-model="widget.value"
        :type="widget.type"
      />
    </div>
  </div>
</template>

<script>
import widget from "../designer/widget/temp";
import { detailDashboard } from "@/api/bigscreen";
import { getToken } from '@/utils/auth';
export default {
  name: "viewer",
  components: {
    widget
  },
  data() {
    return {
      bigScreenStyle: {},
      widgets: [],
      equipment: '',
      data: null
    };
  },
  mounted() {
    this.getData();
    this.equipment = document.body.clientWidth;
    window.addEventListener("resize", () => {
      this.equipment = document.body.clientWidth;
      this.handleBigScreenStyle()
    });
  },
  methods: {
    getData() {
      const reportCode = this.$route.params.id;
      const loading = this.$loading({
        lock: true,
        text: "正在加载中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      detailDashboard(reportCode).then(({ tx_status, content }) => {
        if (tx_status !== '00') return;
        const data = JSON.parse(content || '')
        this.data = data
        this.handleBigScreenStyle()
        this.widgets = data.widgets;
      }).finally(() => {
        loading.close();
      })
    },
    handleBigScreenStyle() {
      const ratioEquipment = this.equipment / this.data.dashboard.width;
      this.bigScreenStyle = {
        width: this.data.dashboard.width + "px",
        height: this.data.dashboard.height + "px",
        "background-color": this.data.dashboard.backgroundColor,
        "background-image": "url(" + this.data.dashboard.backgroundImage + '&Authorization=' + getToken() + ")",
        "background-position": "0% 0%",
        "background-size": "100% 100%",
        "background-repeat": "initial",
        "background-attachment": "initial",
        "background-origin": "initial",
        "background-clip": "initial",
        transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
        "transform-origin": "0 0"
      };
    }
  }
};
</script>

<style scoped lang="less">
.layout {
  width: 100%;
  height: 100vh;
  text-align: center;
}
.bottom-text {
  width: 100%;
  color: #a0a0a0;
  position: fixed;
  bottom: 16px;
  z-index: 9999;
}
</style>
